CSS Animacije

@keyframes

@keyframes je pravilo u CSS-u koje definira animaciju. Određuje ključne okvire (keyframes) unutar kojih se element animira. Svaki ključni okvir definira specifične stilove koji će biti primijenjeni u određenim trenucima tijekom trajanja animacije.

animation-name

animation-name je svojstvo koje se koristi za označavanje imena animacije definirane pomoću @keyframes. Definira koju animaciju želimo primijeniti na element.

animation-duration

animation-duration označava koliko dugo traje animacija. Vrijednost može biti u sekundama (s) ili milisekundama (ms).

animation-delay

animation-delay određuje kašnjenje prije nego što animacija počne. Također se može definirati u sekundama ili milisekundama.

animation-iteration-count

animation-iteration-count definira koliko puta animacija treba biti izvedena. Može biti brojčana vrijednost ili ključna riječ infinite za beskonačan broj ponavljanja.

animation-direction

animation-direction određuje smjer u kojem će se animacija odvijati. Vrijednosti mogu biti:

• normal - animacija ide u normalnom smjeru.
• reverse - animacija ide u obrnutom smjeru.
• alternate - animacija se izmjenjuje između normalnog i obrnutog smjera.
• alternate-reverse - animacija se izmjenjuje između obrnutog i normalnog smjera.

animation-timing-function

animation-timing-function definira tempo ili brzinu promjena tijekom trajanja animacije. Neke od vrijednosti uključuju:

• linear - animacija se odvija ravnomjerno.
• ease - animacija počinje sporo, ubrzava se, a zatim usporava.
• ease-in - animacija počinje sporo, a zatim ubrzava.
• ease-out - animacija počinje brzo, a zatim usporava.
• ease-in-out - animacija počinje sporo, ubrzava se, a zatim usporava.

animation-fill-mode

animation-fill-mode određuje kako će izgledati stilovi elementa kada animacija nije aktivna. Vrijednosti uključuju:

• none - nema promjena izvan trajanja animacije.
• forwards - element zadržava stilove definirane na posljednjem ključnom okviru animacije.
• backwards - element zadržava stilove definirane na prvom ključnom okviru animacije.
• both - element zadržava stilove iz oba smjera.

animation

animation je skraćeni zapis za primjenu svih gore navedenih svojstava u jednoj liniji. Na primjer:

        .box {
            animation: moveBox 5s ease-in-out 1s infinite alternate;
        }
        

Ovo znači da animacija moveBox traje 5 sekundi, počinje nakon 1 sekunde, ponavlja se beskonačno i izmjenjuje smjer.